<template>
	<HeaderNav />
	<article>
		<!-- 网站主体 -->
		<div id="main">
			<section class="ct">
				<h1 class="detail-msg">消息中心</h1>

				<div class="bg-hr"></div>

				<ul class="msg-menu">
					<li class="official">
						<a :class="{active: type === 'official'}" @click="$router.push({name:'message', query: {type: 'official'}})" >官方(<b>{{ $store.state.message.official }}</b>)</a>
						<Official />
					</li>
					<li class="notify">
						<a :class="{active: type === 'notify'}" @click="$router.push({name:'message', query: {type: 'notify'}})" >通知(<b>{{ $store.state.message.notify }}</b>)</a>
						<Notify />
					</li>
					<li class="letter">
						<a @click="$router.push({name:'message', query: {type: 'letter'}})"
								:class="{active: type === 'letter'}">私信(<b>{{ $store.state.message.letter }}</b>)</a>
            <Chat />
					</li>
					<li class="blist">
						<a :class="{active: type === 'blist'}" @click="$router.push({name:'message', query: {type: 'blist'}})" >黑名单</a>
						<BlockList />
					</li>
				</ul>

			</section>

		</div>
	</article>
	<Footer />
</template>

<script>
import HeaderNav from "../components/HeaderNav.vue";
import Footer from "../components/Footer.vue";
import Official from '../components/message/Official.vue'
import Notify from '../components/message/Notify.vue'
import BlockList from '../components/message/BlockList.vue'
import Chat from "../components/message/Chat.vue";

export default {
	components: {
		HeaderNav,
		Footer,
		Official ,
		Notify,
		BlockList,
    Chat
	},
	props: {
		type: {
			required: true,
			type: String,
		}
	},

}
</script>

<style>
</style>